<template>
  <div class="pro-vue-vedio">
    <video-player
      ref="videoPlayer"
      :options="playerOptions"
      :playsinline="true"
      @play="onPlayerPlay($event)"
      @pause="onPlayerPause($event)"

      @ended="onPlayerEnded($event)"
      @waiting="onPlayerWaiting($event)"
      @playing="onPlayerPlaying($event)"
      @loadeddata="onPlayerLoadeddata($event)"
      @timeupdate="onPlayerTimeupdate($event)"
      @canplay="onPlayerCanplay($event)"
      @canplaythrough="onPlayerCanplaythrough($event)"
      @statechanged="playerStateChanged($event)"
      @ready="playerReadied"

      class="video-player-box"
      custom-event-name="customstatechangedeventname"
    />
  </div>
</template>

<script>
import 'video.js/dist/video-js.css';

import { videoPlayer } from 'vue-video-player';

export default {
  name: 'JeVedio',
  components: { videoPlayer },
  data() {
    return {
      playerOptions: {
        muted: true,
        language: 'en',
        playbackRates: [0.7, 1.0, 1.5, 2.0],
        sources: [{
          type: 'video/mp4',
          src: require('./assets/vedio/audio.wav'),
        }],
        poster: require('./assets/images/rock.png'),
      },
    };
  },
  computed: {
    player() {
      return this.$refs.videoPlayer.player;
    },
  },
  mounted() {},
  methods: {
    onPlayerEnded(player) {
      console.log('player onPlayerEnded!', player);
    },
    onPlayerWaiting(player) {
      console.log('player onPlayerWaiting!', player);
    },
    onPlayerPlaying(player) {
      console.log('player onPlayerPlaying!', player);
    },
    onPlayerLoadeddata(player) {
      console.log('player onPlayerLoadeddata!', player);
    },
    onPlayerTimeupdate(player) {
      console.log('player onPlayerTimeupdate!', player);
    },
    onPlayerCanplay(player) {
      console.log('player onPlayerCanplay!', player);
    },
    onPlayerCanplaythrough(player) {
      console.log('player onPlayerCanplaythrough!', player);
    },
    // listen event
    onPlayerPlay(player) {
      console.log('player play!', player);
    },
    onPlayerPause(player) {
      console.log('player pause!', player);
    },
    // ...player event

    // or listen state event
    playerStateChanged(playerCurrentState) {
      console.log('player current update state', playerCurrentState);
    },

    // player is ready
    playerReadied(player) {
      console.log('the player is readied', player);
      // you can use it to do something...
      // player.[methods]
    },
  },
};
</script>

<style lang="scss">
  .page__vipboard {
    background-color: #f0f2f5;
    height: 100%;
    .page__content {
      width: 1200px;
      margin: 0 auto;
      height: 100%;
      position: relative;
      overflow: hidden;
      padding: 20px 0;
      .scroll {
        width: 1220px;
        padding-right: 20px;
        overflow-y: auto;
        height: 100%;
        .banner {
          width: 100%;
          height: 100px;
          position: relative;
          // border: 1px solid black;
          overflow: hidden;
          img {
            width: 100%;
            height: 100%;
          }
          .bannerbtn {
            position: absolute;
            right: 20px;
            bottom: 10px;
            z-index: 2;
            &.downloadbtn {
              right: 110px;
            }
          }
          .el-carousel__container {
            height: 100px;
          }
          .el-carousel__button {
            width: 8px;
            height: 8px;
            border-radius: 100%;
          }
          .el-carousel__indicator--horizontal {
            padding-left: 10px;
            padding-right: 10px;
          }
        }
        .section {
          margin-top: 20px;
        }
        .card {
          padding: 10px 15px;
          width: 590px;
          height: 380px;
          background-color: #fff;
          position: relative;
          .card_title {
            height: 30px;
            line-height: 30px;
            font-size: 14px;
            i {
              font-size: 13px;
              color: #ADADAD;
            }
          }
          &.fullcard {
            width: 1200px;
          }
        }
      }
    }
  }
</style>
<style lang="scss" scoped>
  .left {
    float: left;
  }
  .right {
    float: right;
  }
  .pointer {
    cursor: pointer;
  }
  .clearBoth {
    &:after {
      content: '';
      clear: both;
      display: table;
    }
  }
  .m30 {
    margin-top: 30px;
  }
</style>
<style lang="scss">
.vipdialog {
  z-index: 999999!important;
  .el-dialog {
    width: 600px !important;
    border-radius: 12px !important;
    .el-dialog__header {
      padding: 0 !important;
    }
    .el-dialog__body {
      padding: 0 0 20px 0 !important;
      border-radius: 12px !important;
    }
    .title {
      color: #ffffff;
      position: absolute;
      top: 15px;
      right: 15px;
      left: 15px;
      font-size: 18px;
      height: 20px;
      line-height: 20px;
      > i {
        font-size: 12px;
      }
    }
    .loading_box {
      margin-top: 20px;
      height: 160px;
      > img {
        display: block;
        margin: 0 auto;
        transform: rotate(360deg);
        animation: rotation 2s linear infinite;
      }
      > p {
        margin-top: 20px;
        font-size: 18px;
        text-align: center;
      }
    }
    .download_box {
      padding: 0 50px;
      height: 160px;
      margin-top: 20px;
      .text {
        position: absolute;
        top: 50px;
        right: 0;
        left: 0;
        text-align: center;
        color: #ffffff;
        font-size: 16px;
      }
      .downloadall {
        margin-left: 20px;
        cursor: pointer;
        color: #386bd0;
        text-decoration: underline;
        font-size: 13px;
        &:hover {
          color: #1a4c9c;
        }
      }
      .list_wrp {
        margin-top: 10px;
        border: 1px solid rgb(49, 96, 202);
        border-radius: 4px;
        padding: 30px;
        .items {
          width: 50px;
          &:not(:first-child) {
            margin-left: 20px;
          }
          > i {
            font-size: 30px;
            position: relative;
            left: 10px;
          }
          > p {
            font-size: 12px;
            text-align: center;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            overflow: hidden;
            word-break: break-all;
            /* autoprefixer:off */
            -webkit-box-orient: vertical;
            /* autoprefixer:on */
          }
        }
      }
    }
    .closebtn {
      background: rgb(49, 96, 202);
      border: 0;
      color: #ffffff;
      padding: 5px 20px;
      border-radius: 4px;
      display: block;
      margin: 0 auto;
      margin-top: 20px;
      cursor: pointer;
    }
  }
}
@keyframes rotation {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
</style>
